<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
<%@ page import ="java.sql.*" %>

<%@ page import ="javax.sql.*" %>

<%@ page import="repository.GenericConector" %>

<%
String saltoLinea = System.getProperty("line.separator");


GenericConector c = new GenericConector();

ResultSet rs = c.getClientes();
ResultSet rpq= c.getPaquetes();
ResultSet rvl= c.getVuelos();

%>




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registrar Reserva</title>


<script>


function sumarCli(varS)
{
    
    var s = document.getElementById("cantClientes").value;
    document.getElementById("cantClientes").value = (parseInt(s)+varS);
    
}
function agregarCliente(select)
{
  var option = select.options[select.selectedIndex];
  var ul = document.getElementById("ulcli"); //select.parentNode.parentNode.parentNode.getElementsByTagName('ul')[0];
     
  var choices = ul.getElementsByTagName('input');
  
  //validar q no se repita id.
  for (var i = 0; i < choices.length; i++)
    if (choices[i].value == option.value)
      return;

  var li = document.createElement('li');
  var input = document.createElement('input');
  var text = document.createTextNode(option.firstChild.data);

  
   var BorrarBtn = document.createElement ("font");
  BorrarBtn.innerHTML = " [Borrar]";
  BorrarBtn.color = "red";


	//var BorrarBtn =  '<font color="red">[Borrar]</font>' ;
  input.type = 'hidden';
  input.name = 'clientesVar[]';
  input.value = option.value;

  li.appendChild(input);
  li.appendChild(text);
  li.appendChild(BorrarBtn);
  
  li.setAttribute('onclick', 'this.parentNode.removeChild(this); sumarCli(-1);');     
    
  ul.appendChild(li);  
  sumarCli(1);
     
}

</script>
<style type="text/css">

#apDiv1 {
	position:absolute;
	left:20px;
	top:20px;
	width:635px;
	height:539px;
	z-index:1;
	right: auto;
}
#apDiv2 {
	position:absolute;
	left:136px;
	top:95px;
	width:573px;
	height:49px;
	z-index:2;
	
}
#apDiv3 {
	position:absolute;
	left:136px;
	top:171px;
	width:575px;
	height:257px;
	z-index:3;
	background-image: url(images/tpwebbg2.png);
}
body {
	background-color: #CCCCCC;
}
.Estilo1 {color: #FF0000;
font-size:18px;}

</style>
</head>
<body>

<div id="apDiv1">
<div id="apDiv2">
  <div align="center" class="Estilo1"><img src="images/tpreservar.png"><!-- Generar Reserva --></div>
</div>
<div id="apDiv3">
  <table width="100%" border="0" align="center">
   <form id="form1" name="form1" method="post" action="ValidarReserva">
    <tr>
      <td>&nbsp;</td>
      <td>Seleccionar Paquete</td>
      
        
      
      <td><select name="paquetelist" id="paquetelist">
      
      
      
      
      <% 
			while(rpq.next()) 
			{ 	
				out.println("<option value='"+rpq.getString(1)+"'>"+rpq.getString(4)+"</option>"); 
				
				
			} 

		%>
      
      
      
      </select></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td width="4%">&nbsp;</td>
      <td width="46%">Agregar Cliente</td>
      <td width="42%">
      
      
   
      
        <select name="clientelist" id="clientelist" onchange="agregarCliente(this);">
             
      <% 
      		while(rs.next()) 
			{ 	
				out.println("<option value='"+rs.getString(1)+"'>"+rs.getString(2)+"</option>"); 
				
				
			} 

		%>
        
        </select>
        <script>
        
        /*
        function add_cli(){
        	
        var nombre = document.getElementById('clientelist').options[document.getElementById('clientelist').selectedIndex].text;
        var valor = document.getElementById('clientelist').options[document.getElementById('clientelist').selectedIndex].value;
        
        
        var destino = document.getElementById("clientesasignados");

        
        var temp = document.createElement("option");
        
        var s = document.getElementById("cantClientes").value;
        document.getElementById("cantClientes").value = (parseInt(s)+1);
        
        temp.value =valor;
        temp.text = nombre;
        
        
        if(document.getElementById("idclisconcat").value==""){        	
        	  document.getElementById("idclisconcat").value = valor
        } else {
      		  document.getElementById("idclisconcat").value = (document.getElementById("idclisconcat").value) + "|" + valor;
        }
        
        
        destino.appendChild(temp);
        */

        
        
       // alert("Agregado el cliente:" +  nombre);
        }
        
        </script>
        
        
       <!-- <button type="button" onclick="add_cli()">Agregar Cliente</button>-->
        </td>
        
     
        
      <td width="8%">&nbsp;</td>
    </tr>
    
    
       <tr>
      <td>&nbsp;</td>
      <td>Clientes Asignados</td>
      <td> 
      
      <ul id="ulcli">
       <!--  ACA VOY AGREGANDO CLIENTES -->
	</ul>


 <!--  ya no uso esto.
      <select name="clientesasignados" size="3" disable="false" id="clientesasignados" multiple="multiple">
        </select>
         -->
        </td>
        <input type="hidden" value="0" id="cantClientes" name="cantClientes">
         <input type="hidden" value="" id="idclisconcat" name="idclisconcat">
      <td>&nbsp;</td>
    </tr>
    
    
       
    
    
    <tr>
      <td>&nbsp;</td>
      <td>Asignar Vuelo</td>
      <td><select name="vueloasignado" id="vueloasignado">
       <% 
      		while(rvl.next()) 
			{ 	
				out.println("<option value='"+rvl.getString(1)+"'>"+rvl.getString(2)+"</option>"); 
				
				
			} 

		%>
      </select></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><br>Observaciones:</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2"><textarea cols="70"></textarea>
      &nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>    
    <tr>
      <td>&nbsp;</td>
      <td>
       
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">
        <center><input type="submit" name="envairreserva" id="envairreserva" value="Guardar Reserva" /></center>
        
   
       <center> <input type="button" onclick='location.href="Modificar.jsp"' value='Modificar una Reserva Hecha'/></center>
      
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
       </form>
      
  </table>
</div>
</div>







</body>
</html>
